<template>
  <div class="detailContainer">
    <div class="detail-container">
      <!-- 轮播图 -->
      <div class="swiper-container">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          @change="onChange"
        >
          <van-swipe-item><img src="./images/1.jpg" alt="" /></van-swipe-item>
          <van-swipe-item><img src="./images/2.jpg" alt="" /></van-swipe-item>
          <van-swipe-item><img src="./images/3.jpg" alt="" /></van-swipe-item>
          <van-swipe-item><img src="./images/4.jpg" alt="" /></van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
         </div>
      <!-- 特价 -->
      <div class="bannerContent">
        <div class="content">
          <div class="head">
            <span>特价</span>
          </div>
          <div class="foot">
            <div class="priceArea">
              <span class="currentPrice">
                <span class="priseIcon">¥</span>
                <span>8199</span>
              </span>
              <span class="couterPrice">¥8499</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="detailBaseInfo">
        <!-- 名字信息 -->
        <div class="baseInfo">
          <!-- 信息 -->
          <div class="info">
            <div class="name">Apple iPhone 12 (A2404) 64GB 黑色 支持移动联通电信5G 双卡双待手机</div>
            <div class="simpleBrandInfo">
              <img
                class="brandLogo"
                src="https://yanxuan-item.nosdn.127.net/a12bbe843d67cdd0d46f62096a129990.png"
              />
              <span class="title">Apple</span>
            </div>
            <div class="desc">推荐理由</div>
          </div>
          <!-- 评价 -->
          <div class="evaluation">
            <div class="wrap">
              <div class="check-wrap">
                <span>查看评价</span>
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
        </div>
        <!-- 方框中的 -->
        <div class="rcmdBanner">
          <ul>
            <li>
              <div class="key">1</div>
              <div class="recommendReason">A14仿生 芯片界的新篇章</div>
            </li>
            <li>
              <div class="key">2</div>
              <div class="recommendReason">官方授权 国行正品 全国联保</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 底部按钮组 -->
    <div class="btnGroup">
      <button>
        <van-icon name="service-o" />
      </button>
      
      <button @click="changeShow">立即购买</button>
      <button @click="addSku2Cart">加入购物车</button>
    </div>

  
    <!-- <van-sku v-model="show" :sku="Jsku" :goods="goods">
      <template #sku-header-price="props">
        <div class="van-sku__goods-price">
          <span class="van-sku__price-symbol">￥</span
          ><span class="van-sku__price-num">{{ props.price }}</span>
        </div>
      </template>
    </van-sku> -->
  </div>
</template>

<script>
import {reqAddOrUpdateCart} from '@/api'
export default {
  name: "Detail",
  data() {
    return {
      current: 0,
      active: "home",
      id:2,
      skuNum:1,
      skuInfo:{
        skuName:'Apple iPhone 12 (A2404) 64GB 黑色 支持移动联通电信5G 双卡双待手机',
        skuNum:1,
        price:8499,
        skuDefaultImg:"http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-rgfWAVRWzAABUiOmA0ic932.jpg",
      }, //商品信息
      spuSaleAttrList:[], //商品可选属性列表

      show: false,
      // Jsku: {
      //   // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
      //   // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
      //   tree: [
      //     {
      //       k: "颜色", // skuKeyName：规格类目名称
      //       k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      //       v: [
      //         {
      //           id: "1", // skuValueId：规格值 id
      //           name: "海蓝色", // skuValueName：规格值名称
      //         },
      //         {
      //           id: "2",
      //           name: "金色",
      //         },
      //         {
      //           id: "3",
      //           name: "石墨色",
      //         },
      //         {
      //           id: "4",
      //           name: "银色",
      //         },
      //       ],
      //     },
      //     {
      //       k: "容量", // skuKeyName：规格类目名称
      //       k_s: "s2", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      //       v: [
      //         {
      //           id: "1", // skuValueId：规格值 id
      //           name: "128G", // skuValueName：规格值名称
      //         },
      //         {
      //           id: "2", // skuValueId：规格值 id
      //           name: "256G", // skuValueName：规格值名称
      //         },
      //         {
      //           id: "3", // skuValueId：规格值 id
      //           name: "512G", // skuValueName：规格值名称
      //         },
      //       ],
      //     },
          
      //   ],
      //   // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
      //   list: [
      //     {
      //       id: 2259, // skuId
      //       s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
      //       s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
      //       s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
      //       price: 100, // 价格（单位分）
      //       stock_num: 111, // 当前 sku 组合对应的库存
      //     },
      //   ],
      //   price: "9.9", // 默认价格（单位元）
      //   stock_num: 227, // 商品总库存
      //   collection_id: 2259, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
      //   none_sku: false, // 是否无规格商品
      //   hide_stock: false, // 是否隐藏剩余库存
      // },
      goods: {
        // 默认商品 sku 缩略图
        picture:
          "https://yanxuan-item.nosdn.127.net/0f3df5b2e6dcddfba0496467366bb040.png?type=webp&quality=90&thumbnail=200x200&imageView",
      },
    };
  },
  methods: {
    async addSku2Cart(){
        let result = await reqAddOrUpdateCart(this.id,this.skuNum)
        if(result.code === 200){
            alert('添加成功！')
        }else{
            alert(result.message)
        }
    },

    async addSku2Cart(){
        let result = await reqAddOrUpdateCart(this.id,this.skuNum)
        if(result.code === 200){
            let showInfo = {
                name:this.skuInfo.skuName, //商品名
                number:this.skuNum, //购买数量
                price:this.skuInfo.price, //价格
                attr:[], //已选属性
                url:this.skuInfo.skuDefaultImg //图片url
            }
            //把用户所选的属性维护到：showInfo.attr里面
            this.spuSaleAttrList.forEach((item1)=>{
                let result = item1.spuSaleAttrValueList.find((item2)=>{
                    return item2.isChecked === '1'
                })
                showInfo.attr.push(result.saleAttrName +':'+ result.saleAttrValueName)
            })
            //将维护好的showInfo存储到sessionStorage中
            sessionStorage.setItem('showInfo',JSON.stringify(showInfo))
            //跳转到添加成功路由
            alert('添加成功')
        }else{
            alert(result.message)
        }
    },

    onChange(index) {
      this.current = index;
    },

    // 规格
    changeShow() {
      this.show = true;
    },

    onClickLeft() {
      this.$router.push({ path: "/home" });
    },
    // 跳转搜索页
    toSearch() {
      this.$router.push({ path: "/search" });
    },
    // 跳转购物车页
    toCart() {
      this.$router.push({ path: "/cart" });
    },
  },
};
</script>

<style lang="less" scoped>
.detailContainer {
  position: relative;
  .detail-container {
    background: #f4f4f4;
    height: 1000px;

    .swiper-container {
      width: 375px;
      height: 375px;
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        text-align: center;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .custom-indicator {
        position: absolute;
        right: 12px;
        bottom: 18px;
        padding: 2px 5px;
        font-size: 12px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.15);
      }
    }
    .bannerContent {
      padding: 8px 0 0 15px;
      background-color: rgb(250, 30, 50);
      width: 360px;
      height: 66px;
      .content {
        .head {
          width: 360px;
          height: 18px;
          font-size: 1px;
          color: #fff;
          margin-bottom: 4px;
        }
        .foot {
          .priceArea {
            color: #fff;
            font-weight: 700;
            .currentPrice {
              font-size: 32px;
              .priseIcon {
                font-size: 18px;
              }
            }
            .couterPrice {
              margin-left: 2px;
              font-size: 14px;
              position: relative;
              &:before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                margin: auto;
                background-color: #fff;
              }
            }
          }
        }
      }
    }
    .detailBaseInfo {
      padding: 13px 0 18px 15px;
      width: 375px;
      height: 220px;
      background: #fff;
      box-sizing: border-box;

      .baseInfo {
        margin-top: 7px;
        display: flex;
        // width: 375px;
        height: 120px;
        .info {
          width: 270px;
          padding-right: 17px;
          box-sizing: border-box;
          .name {
            font-size: 16px;
            color: #333;
            height: 72px;
            line-height: 24px;
            margin-bottom: 2px;
            font-weight: 700;
          }
          .simpleBrandInfo {
            height: 28px;
            margin: 3px 0 2.5px 0;
            display: flex;
            align-items: center;
            .brandLogo {
              width: 14px;
              height: 14px;
              margin-right: 4px;
              display: inline-block;
            }
            .title {
              height: 17px;
              line-height: 17px;
              font-size: 12px;
              margin-right: 8px;
              color: #7f7f7f;
            }
          }
          .desc {
            font-size: 12px;
            line-height: 18px;
            height: 20px;
            color: #333;
            font-weight: lighter;
          }
        }
        .evaluation {
          width: 89px;
          height: 99px;
          display: flex;
          justify-content: center;
          align-items: center;
          .wrap {
            width: 80px;
            height: 20px;
            .check-wrap {
              font-size: 14px;
              color: #333;
              padding-right: 10px;
            }
          }
        }
      }

      .rcmdBanner {
        width: 345px;
        height: 54px;
        padding: 7px 10px;
        border: 1px solid #e6e6e6;
        background: #fafafa;
        margin-top: 6px;
        box-sizing: border-box;
        ul {
          font-size: 12px;
          color: #333;
          li {
            &:not(:last-child) {
              margin-top: 2px;
            }
            height: 18px;
            line-height: 18px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #333;
            .key {
              display: inline-block;
              width: 12px;
              height: 12px;
              border: 1px solid #dd1a21;
              border-radius: 50%;
              text-align: center;
              line-height: 12px;
              font-size: 10px;
              color: #dd1a21;
              font-family: PingFang SC;
              font-weight: 700;
              margin-right: 4px;
              vertical-align: middle;
            }
            .recommendReason {
              display: inline-block;
              height: 18px;
              line-height: 18px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }

  .btnGroup {
    width: 375px;
    height: 52px;
    background: #fff;
    position: fixed;
    left: 0;
    // top: calc(100vh - 52px);
    bottom: 0;
    width: 100%;
    display: flex;

    & button:nth-child(1) {
      width: 75px;
      border: none;
      border-top: 1px solid #c7c7c7;
      border-right: 1px solid #c7c7c7;
    }
    & button:nth-child(2) {
      width: 150px;
      font-size: 14px;
      color: #333;
      border: none;
      border-top: 1px solid #c7c7c7;
    }
    & button:nth-child(3) {
      width: 150px;
      background: #dd1a21;
      font-size: 14px;
      color: #fff;
      border: none;
    }
  }
}
</style>